<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/common/meta.jsp"%>
<link href="<s:url value='/css/main.css'/>" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" language="JavaScript"
	src="<s:url value='/js/jquery/jquery-1.3.2.min.js'/>"></script>
<script type="text/javascript"
	src="<s:url value='/js/DatePicker/DatePicker.js'/>"></script>
<script type="text/javascript">
/**
 * 将所有option从src转移到dest
 * @param srcId	源select控件id
 * @param destId 目标select控件id
 */
function moveAllOptions(srcId, destId){
	var src = jQuery("#"+srcId)[0];
	var dest = jQuery("#"+destId)[0];
	var optionsrc = src.options;
	for(var i=0; i<optionsrc.length; i++){
		var oMove = new Option(optionsrc[i].text, optionsrc[i].value);
		src.remove(i);
		try{
			dest.add(oMove,null); // standards compliant
		}
		catch(ex){
		    dest.add(oMove); // IE only
		}
		i--;
	}
}

/**
 * 如果src有已选项在dest，则去掉
 * 通常用在页面载入完成后
 */
function removeSelectedOptions(srcId, destId){
	var src = jQuery("#"+srcId)[0];
	var dest = jQuery("#"+destId)[0];
	var optionsrc = src.options;
	var optiondest = dest.options;
	if(optiondest == null || optiondest.length == 0) return;
	for(var i=0; i<optiondest.length; i++){
		var curValue = optiondest[i].value;
		for(var j=0; j<optionsrc.length; j++){
			if(optionsrc[j].value == curValue){
				src.remove(j);
				j--;
			}
		}
	}
}

/**
 * 将选中的option从src转移到dest
 * @param srcId	源select控件id
 * @param destId 目标select控件id
 */
function moveOptions(srcId, destId){
	var src = jQuery("#"+srcId)[0];
	var dest = jQuery("#"+destId)[0];
	var optionsrc = src.options;
	for(var i=0; i<optionsrc.length; i++){
		if(optionsrc[i].selected == true){
			//选中则转移到dest
			var oMove = new Option(optionsrc[i].text, optionsrc[i].value);
			src.remove(i);
			try{
				dest.add(oMove,null); // standards compliant
			}
			catch(ex){
			    dest.add(oMove); // IE only
			}
			i--;
		}
	}
}

//获得所选择的权限
function getSelectedPermissions(){
	var sel = $("#dest")[0];
	var options = sel.options;
	var len = options.length;
	var selStr = "";
	for(var i=0; i < len; i++){
		selStr = selStr + options[i].value+";";
	}
	$("input[name='pSelect']").attr("value", selStr);
//	alert($("input[name='pSelect']")[0].value);
}

$(function(){
	removeSelectedOptions("src", "dest");
	$("#allr").click(function(){
		moveAllOptions("src", "dest");
	});
	$("#somer").click(function(){
		moveOptions("src", "dest");
	});
	$("#alll").click(function(){
		moveAllOptions("dest", "src");
	});
	$("#somel").click(function(){
		moveOptions("dest", "src");
	});
});
</script>
<title>角色编辑</title>
</head>
<body>
<s:if test="%{message != null}">
	<font color="red"><s:property value="message" escape="false" /></font>
</s:if>
<br />
<s:form action="RoleSave" namespace="/" method="post">
<s:hidden name="item.id"></s:hidden>
<table width="100%" border="0" cellpadding="3" cellspacing="1"
	bgcolor="#E2E2E2">
	<tr class="tr1">
		<td colspan="2">角色编辑</td>
	</tr>
	<tr class="tab">
		<td class="td1">角色名：<font color="red">*</font></td>
		<td><s:textfield name="item.name" size="20"></s:textfield></td>
	</tr>
	<tr class="tab">
		<td class="td1">角色描述：</td>
		<td><s:textarea name="item.description" cols="50" rows="5"></s:textarea></td>
	</tr>
	<tr class="tab">
		<td class="td1">权限选择：</td>
		<td>
			<div style="float: left; padding-top: 5px;">
				当前可选权限:
				<br />
				<s:if test="%{permissions != null}">
					<s:select id="src" list="permissions" listKey="id"
						listValue="name" cssStyle="width: 150px; margin-top: 5px;"
						multiple="true" size="10" name="xx">
					</s:select>
				</s:if>
				<s:else>
					<select id="src" size="10" multiple="multiple"
						style="width: 150px; margin-top: 5px;">
					</select>
				</s:else>
			</div>
			<div
				style="float: left; margin-left: 10px; margin-right: 10px; padding-top: 30px;">
				<input type="button" id="allr" value=" >> " />
				<br />
				<br />
				<input type="button" id="somer" value=" > " />
				<br />
				<br />
				<input type="button" id="somel" value=" < " />
				<br />
				<br />
				<input type="button" id="alll" value=" << " />
			</div>
			<div style="float: left; padding-top: 5px;">
				当前已选权限:
				<br />
				<s:if test="%{curPermissions != null}">
					<s:select id="dest" list="curPermissions" listKey="id" listValue="name" 
						size="10" multiple="true" cssStyle="width: 150px; margin-top: 5px;" name="xx2">
					</s:select>
				</s:if>
				<s:else>
					<select id="dest" size="10" multiple="multiple"
						style="width: 150px; margin-top: 5px;">
					</select>
				</s:else>
				<s:hidden name="pSelect"></s:hidden>
			</div>
		</td>
	</tr>
	<tr class="tab">
		<td colspan="2">
			<input class="button" type="button" value="保存" onclick="getSelectedPermissions();this.form.submit();" />
		</td>
	</tr>
</table>
</s:form>
<br />
</body>
</html>